<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
<div id="app">

    <input v-model="toDoMsg"/> <button @click="appendMsgToList">添加</button>
    <p v-for="(item,index) in toDoList" :key="index">
        <span>{{item}}</span>
        <button @click="del(index)">删除</button>
    </p>
    <div v-if="count !=0">
        <span>{{'总数： '+count}}</span>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 
<script>
    new Vue({
        el:'#app',
        data:{
          toDoMsg:'',
          toDoList:[]

        },
        methods:{
            appendMsgToList(){
               if(this.toDoMsg){
                   this.toDoList.push(this.toDoMsg);
               }
            },
            del(index){
                this.toDoList.splice(index,1)
            }
  
        },
        computed:{
            count(){
                return this.toDoList.length
            }
        }
    })
</script>
</body>
</html>